<template>
	<!-- 店铺管理 -->
	<view class="shop-manage-box">
		<!-- <image class="bg-img" :src='`http://localhost:15000/fileManager/getImageById?id=` + shopForm.shopLogo' ></image> -->
		<view class="shop-manage-header">
			{{shopForm.shopLogo}}
			<image 
				style="float: left;"
				class="shopItem_image" 
				:src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + shopForm.shopLogo'
				mode=""
			></image>
			<view style="float: left;margin-left: 10px;">
				<view style="float:left;padding: 5px;">
					<p style="font-size: 20px;">
						{{shopForm.shopName}}
					</p>
					<p style="font-size: 12px;color: gray;padding-top: 10px;" @click="toShopDetails">点击查看店铺详细</p>
				</view>
				<view class="shop_operation_box">
					<u-switch
						style="float:left;margin-top: 6px;"
						space="2" v-model="shopForm.operationStatus === 1" size="20" activeColor="green"
						inactiveColor="rgb(230, 230, 230)"
						asyncChange
						@change="asyncChange(shopForm.id, shopForm.operationStatus)">
					</u-switch>
					<view v-show="shopForm.operationStatus === 0" style="height: 20px;float:left;margin-left: 10px;margin-top: 6px;">
						<view style="width: 10px;height: 10px;margin-top:6px;;border-radius: 90px;background-color: red;float:left;"></view>
						<text style="float:left;margin-left: 3px;">未营业</text>
					</view>
					<view v-show="shopForm.operationStatus === 1" style="height: 20px;float:left;margin-left: 10px;margin-top: 6px;">
						<view style="width: 10px;height: 10px;margin-top:6px;;border-radius: 90px;background-color: green;float:left;"></view>
						<text style="float:left;margin-left: 3px;">营业中</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="10" bgColor="#F5F5F5"></u-gap>
		<u-gap height="10" bgColor="#F5F5F5"></u-gap>
		<!-- alias小应用 -->
		<view style="width: 100%;background-color: #F5F5F5;">
			<view class="shop-manage-header-div1">
				<u-grid :border="true" @click="aliasClick">
					<u-grid-item
						v-for="(listItem,listIndex) in aliasList"
						:key="listIndex"
						customStyle="width:96px;height: 100px;padding-top: 10px; padding-bottom: 10px" 
					>
						<image 
						style="width: 20px;height: 20px"
							:src=listItem.name
							mode=""
						></image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-gap height="10" bgColor="#F5F5F5"></u-gap>
		<view class="shop-manage-main" >
			<view class="shop-manage-red_envelope" @click="toShopCoupon">
				<image
				style="width: 30px;height: 30px;margin-top: 30px;margin-left: 30px;"
					src="../../static/red_envelope.png"
					mode=""
				></image>
				<p style="font-size: 14px;font-weight: bold;margin-left: 20px;">发放红包</p>
			</view>
					

		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 店铺信息对象
				shopForm: {},
				aliasList: [{
						name: '../../static/blueLogo.png',
						title: '商品'
					},
					{
						name: '../../static/wallet-black.png',
						title: '钱包'
					},
					{
						name: '../../static/wallet.jpg',
						title: '对账'
					},
					{
						name: '../../static/message.png',
						title: '评价'
					}
				],
			}
		},
		created() {
			// 初始化根据Id获取店铺信息
			this.getShopById()
		},
		mounted () {
		},
		methods: {
			// 点击跳转商品发放红包页面
			toShopCoupon(){
				uni.navigateTo({
					url:"/pages/shop/shop-coupon-grant"
				})
			},
			// 点击查看商品详情时触发事件
			toShopDetails(){
				uni.navigateTo({
					url:"/pages/shop/shop-details"
				})
			},
			// alias小应用被点击时触发事件
			aliasClick(name) {
				if (name === 0) {
					uni.navigateTo({
						url: '/pages/commodity/commodity-manage'
					})
				}
				if(name === 1){
					uni.navigateTo({
						url:'/pages/shop/shop-wallet'
					})
				}
				if (name === 2){
					uni.navigateTo({
						url:'/pages/shop/shop-bill'
					})
				}
				if (name === 3){
					uni.navigateTo({
						url:'/pages/comment/comment'
					})
				}
			},
			// 根据Id获取店铺信息
			getShopById() {
				this.$myRequest({
					url: '/eat-service/shop/shopById',
					data: {
						shopId: uni.getStorageSync('shopId')
					}
				}).then(res => {
					this.shopForm = res.data.obj
				})
			},
			// 点击滑块设置营业状态
			asyncChange (shopId, operationStatus) {
				if(operationStatus == 1) {
					operationStatus = 0
				} else {
					operationStatus = 1
				}
				this.$myRequest({
					url: '/eat-service/shop/editShopStatus',
					data: {
						shopId: shopId,
						status: operationStatus
					}
				}).then(res => {
					if (res.data.flag) {
						this.uNotify('修改成功', 'success')
						this.getShopById()
					} else {
						this.uNotify('修改失败，请重试', 'warning')
					}
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style scoped>
.bg-img{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
.shop-manage-box{
	width: 100%;
	margin: 0 auto;
}
.shopItem_image{
	width: 80px;
	height: 80px;
	float:left;
}
.shop_operation_box{
	position: absolute;
	top: 30px;
	right: 0;
}
.shop-manage-header{
	width: 90%;
	height: 80px;
	margin: 0 auto;
	position: relative;
	padding: 10px 5px;
}
.shop-manage-header-div1{
	width: 95%;
	height: 100px;
	margin: 0 auto;
	background-color: white;
}
.shop-manage-red_envelope{
	border: 1px solid silver;
	width: 100px;
	height: 100px;
	margin-left: 10px;
}
</style>
